<script>
import api from '@/api'

export default {
  name: 'createHistory',
  data() {
    return {
      tabPosition: 0,
      tabList: [
        {
          id: 0,
          title: '进行中',
        },
        {
          id: 1,
          title: '已结束',
        },
        {
          id: 2,
          title: '未通过',
        },
      ],
      disabled: false,
      isLoading: false,
      page: 1,
      lastPage: 1,
      houseList: [],
    }
  },
  watch: {
    tabPosition(newVal) {
      this.getHouseList()
    },
  },
  onLoad() {
    this.getHouseList()
  },
  methods: {
    async getHouseList() {
      await uni.showLoading()
      try {
        const result = await api.welfareHouses.createHistory({
          status: this.tabPosition + 1,
          page: this.page,
        })
        if (result.code !== 200) throw new Error('数据获取错误')
        this.lastPage = result.data.last_page
        if (this.page === 1) {
          this.houseList = result.data.data
        } else {
          this.houseList.push(...result.data.data)
        }
      } catch (e) {
        console.log(e)
        await uni.showToast({ title: e.message, icon: 'none' })
      } finally {
        this.isLoading = false
        uni.hideLoading()
      }
    },
    onRefresh() {
      this.page = 1
      this.lastPage = 1
      this.isLoading = true
      this.getHouseList()
    },
    join(id) {
      if (this.tabPosition === 2) {
        return
      }
      this.header('/pages/welfare/detail?id=' + id, 1, true)
    },
    onLoadMore() {
      if (this.page >= this.lastPage) {
        return
      }
      this.page++
      this.getHouseList()
    },
  },
  computed: {
    btnText() {
      return this.tabPosition === 0 ? '待开奖' : this.tabList[this.tabPosition]
    },
  },
}
</script>

<template>
  <view class="create-history-layout">
    <my-header title="创建记录" background-color="transparent"></my-header>
    <my-content class="content">
      <my-tab start v-model="tabPosition" :tab-list="tabList"></my-tab>
      <scroll-view
        refresher-background=""
        class="scroll-view"
        scroll-y="true"
        @refresherrefresh="onRefresh"
        :refresher-triggered="isLoading"
        refresher-enabled
        @scrolltolower="onLoadMore"
      >
        <view class="house-list">
          <my-house
            v-for="item in houseList"
            :key="item.id"
            :disabled="tabPosition !== 0"
            :btn-text="btnText"
            :house="item"
            @btnClick="join(item.id)"
          ></my-house>
        </view>
      </scroll-view>
    </my-content>
  </view>
</template>

<style scoped lang="scss">
.create-history-layout {
  height: 100vh;
  background-image: url('https://www.dingxians.cn/upload/images/common/bg.png');
  background-size: 100% 100%;

  .content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .scroll-view {
      flex: 1;
      overflow-y: hidden;
      width: 710rpx;
      margin: 20rpx auto 0;

      .house-list {
        height: 100%;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: space-between;
      }
    }
  }
}
</style>
